<template>
  <div class="chart-item full">
    <div class="chart-header">
      <h3>异常物料清单</h3>
      <div class="table-tabs">
        <el-radio-group v-model="exceptionType" size="small" @change="handleExceptionTypeChange">
          <el-radio-button label="overstock">积压物料</el-radio-button>
          <el-radio-button label="shortage">短缺物料</el-radio-button>
          <el-radio-button label="expired">过期物料</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="exception-table-content">
      <el-table
        :data="currentTableData"
        style="width: 100%"
        height="300"
        stripe
        :fit="true"
        :table-layout="'auto'"
      >
        <el-table-column prop="materialCode" label="物料编码" min-width="120" />
        <el-table-column prop="materialName" label="物料名称" min-width="180" />
        <el-table-column prop="warehouse" label="所在库房" min-width="100" />
        <el-table-column prop="quantity" label="数量" min-width="80" align="right" />
        <el-table-column prop="unit" label="单位" min-width="60" />
        <el-table-column prop="value" label="价值(元)" min-width="100" align="right" />
        <el-table-column prop="days" label="天数" min-width="80" align="right" />
        <el-table-column prop="status" label="状态" min-width="80">
          <template #default="scope">
            <el-tag
              :type="getStatusType(scope.row.status)"
              size="small"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="120" fixed="right">
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleView(scope.row)"
            >
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleProcess(scope.row)"
            >
              处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExceptionMaterialTable',
  props: {
    exceptionData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      exceptionType: 'overstock',
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      overstockData: [
        { materialCode: 'M001', materialName: '钢材A型', warehouse: '华东库房', quantity: 1500, unit: '吨', value: 450000, days: 45, status: '严重积压' },
        { materialCode: 'M002', materialName: '塑料颗粒B', warehouse: '华南库房', quantity: 800, unit: 'kg', value: 24000, days: 32, status: '轻微积压' },
        { materialCode: 'M003', materialName: '电子元件C', warehouse: '华北库房', quantity: 2000, unit: '个', value: 120000, days: 28, status: '轻微积压' }
      ],
      shortageData: [
        { materialCode: 'M101', materialName: '铜线D型', warehouse: '西南库房', quantity: 50, unit: 'km', value: 15000, days: 3, status: '严重短缺' },
        { materialCode: 'M102', materialName: '橡胶密封圈', warehouse: '华东库房', quantity: 200, unit: '个', value: 8000, days: 5, status: '轻微短缺' }
      ],
      expiredData: [
        { materialCode: 'M201', materialName: '化学试剂E', warehouse: '华南库房', quantity: 100, unit: 'L', value: 5000, days: 365, status: '已过期' },
        { materialCode: 'M202', materialName: '食品添加剂F', warehouse: '华北库房', quantity: 50, unit: 'kg', value: 3000, days: 180, status: '即将过期' }
      ]
    }
  },
  computed: {
    currentTableData() {
      let data = []
      switch (this.exceptionType) {
        case 'overstock':
          data = this.overstockData
          break
        case 'shortage':
          data = this.shortageData
          break
        case 'expired':
          data = this.expiredData
          break
      }
      this.pagination.total = data.length
      const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const end = start + this.pagination.pageSize
      return data.slice(start, end)
    }
  },
  methods: {
    handleExceptionTypeChange(type) {
      this.exceptionType = type
      this.pagination.currentPage = 1
      this.$emit('exception-type-change', type)
    },

    getStatusType(status) {
      const statusMap = {
        '严重积压': 'danger',
        '轻微积压': 'warning',
        '严重短缺': 'danger',
        '轻微短缺': 'warning',
        '已过期': 'danger',
        '即将过期': 'warning'
      }
      return statusMap[status] || 'info'
    },

    handleView(row) {
      this.$emit('view-material', row)
    },

    handleProcess(row) {
      this.$emit('process-material', row)
    },

    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.currentPage = 1
    },

    handleCurrentChange(val) {
      this.pagination.currentPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
.table-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}

.exception-table-content {
  width: 100%;

  .table-pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  /* 确保表格撑满容器 */
  ::v-deep .el-table {
    width: 100% !important;

    .el-table__header-wrapper,
    .el-table__body-wrapper {
      width: 100% !important;
    }

    .el-table__header,
    .el-table__body {
      width: 100% !important;
      table-layout: auto;
    }

    /* 表格列自适应宽度 */
    .el-table__header th,
    .el-table__body td {
      padding: 8px 12px;
    }

    /* 确保最后一列撑满剩余空间 */
    .el-table__header th:last-child,
    .el-table__body td:last-child {
      width: auto;
    }
  }
}
</style>
